<script setup>
// import 'codemirror/theme/liquibyte.css'; //导入选中的theme主题,与初始化theme配置一致
// import 'codemirror/addon/hint/show-hint.css'; //导入自动提示核心样式
// import 'codemirror/mode/sql/sql.js'; //导入使用的语言语法定义文件，初始化mode配置一致
// import 'codemirror/addon/edit/matchbrackets.js';
// import 'codemirror/addon/hint/show-hint.js'; //导入自动提示核心文件
// import 'codemirror/addon/hint/sql-hint.js'; //导入指定语言的提示文件

import {ref} from "vue";
// import ReplyWrapper from "@/views/salon/cmpts/ReplyWrapper.vue";
import {articleList2} from "@/config/kb_articles";
import {Codemirror} from "vue-codemirror";

const {id: articleId} = defineProps({
  id: String,
})

const articleList = {
  title: '123',
  content: '部分文章内容',
  tags: ['java', 'javaEE']
}
let code1 = ref('class A{\n' +
    '       private B b;\n' +
    '}\n' +
    'class B{\n' +
    ' \n' +
    '}');
let code2 = ref('class A{\n' +
    '       public void f(B b){\n' +
    ' \n' +
    '}\n' +
    '}\n' +
    'class B{\n' +
    ' \n' +
    '}')
let code3 = ref('public class Course {\n' +
    '       private String title;\n' +
    '       private double price;\n' +
    '       public Course(String title, double price) {\n' +
    '              super();\n' +
    '              this.title = title;\n' +
    '              this.price = price;\n' +
    '       }\n' +
    '       public Course(String title) {\n' +
    '              super();\n' +
    '              this.title = title;\n' +
    '       }\n' +
    '       public Course() {\n' +
    '              super();\n' +
    '       }\n' +
    '       public String getTitle() {\n' +
    '              return title;\n' +
    '       }\n' +
    '       public void setTitle(String title) {\n' +
    '              this.title = title;\n' +
    '       }\n' +
    '       public double getPrice() {\n' +
    '              return price;\n' +
    '       }\n' +
    '       public void setPrice(double price) {\n' +
    '              this.price = price;\n' +
    '       }\n' +
    '}')
let code4 = ref('public class Student {\n' +
    '    private String name;\n' +
    '    //1.关联关系：Student关联Course\n' +
    '    private Course course;\n' +
    '    public Student(String name) {\n' +
    '       super();\n' +
    '       this.name = name;\n' +
    '    }\n' +
    '}')
let code5 = ref('public class Student {\n' +
    '       private String name;\n' +
    '       //1.关联关系：Student关联Course\n' +
    '       private Course course;\n' +
    '      \n' +
    '       public Student(String name) {\n' +
    '              super();\n' +
    '              this.name = name;\n' +
    '       }\n' +
    '      \n' +
    '       //2.依赖关系：Student依赖Course\n' +
    '       public void chooseCourse(Course course){\n' +
    '              this.course=course;\n' +
    '       }\n' +
    '      \n' +
    '       public Course getCourse(){\n' +
    '              return this.course;\n' +
    '       }\n' +
    '}')
const replyList = ref([
  {
    id: 1,
    unickname: 'plx',
    content: '这里的java是什么版本呐',
    releaseTime: '2023-09-12',
    subReplyList: [
      {
        id: 1,
        isInner: false,
        unickname: 'mjm',
        content: '是Java 8版本！',
        releaseTime: '2023-09-13'
      },{
        id: 2,
        isInner: true,
        tounickname: 'mjm',
        fromunickname: 'plx',
        content: '好的，谢谢你',
        releaseTime: '2023-09-13'
      },
    ]
  },{
    id: 2,
    unickname: 'mhy',
    content: '博主举的例子非常简单易懂！',
    releaseTime: '2023-10-03',
  },{
    id: 3,
    unickname: 'hxt',
    content: '没有看太明白。。。',
    releaseTime: '2023-10-11',
  },
]);
let cmOptions = {
  value: '',//编辑器的起始值。可以是字符串，也可以是文档对象。
  mode: "text/x-hive",//第一个将模式名称映射到它们的构造函数，第二个将MIME类型映射到模式规范。
  theme: "liquibyte",//编辑器样式的主题
  indentWithTabs: true,//在缩进时，是否tabSize 应该用N个制表符替换前N *个空格。默认值为false。
  smartIndent: true,//是否使用模式提供的上下文相关缩进（或者只是缩进与之前的行相同）。默认为true。
  lineNumbers: true,//是否在编辑器左侧显示行号。
  matchBrackets: true,//括号匹配
  autofocus: false,//可用于使CodeMirror将焦点集中在初始化上
  extraKeys: {"Ctrl-Space": "autocomplete"},//按键配置
  hintOptions: {
    tables: {
      users: ["name", "score", "birthDate"],
      countries: ["name", "population", "size"]
    }
  }
}

</script>

<template>
  <div class="article-view">
    <h2 class="title">Java语言中的关联与依赖关系</h2>
    <div class="content">
      <p>在本文中，将使用简单的Java类，展示Java语言中类与类之间常见的两种关系：关联关系，和依赖关系</p>
      <ol>
        <li>
          <h4>关联关系</h4>
          <div class="text">类A关联类B的意思是，如果实例化一个A类的对象，同时，会有一个B类的对象被实例化。简言之，B作为A的属性存在。如下：</div>
          <codemirror
              v-model="code1"
              :options="cmOptions"
              class="code">
          </codemirror>
        </li>
        <li>
          <h4>依赖关系</h4>
          <div class="text">类A依赖类B的意思是，如果A的对象要完成某一操作，必须使用B的对象的某些操作来帮忙，才能完成。简言之，B作为A的某个方法的方法参数存在。如下：</div>
          <codemirror
              v-model="code2"
              :options="cmOptions"
              class="code">
          </codemirror>
          关联和依赖，是面向对象编程中，最常见的两种关系。
        </li>
        <li>
          <h4>示例</h4>
          <div class="text">假设有这样一个场景描述：某培训中心提供免费培训课程，每门课程都有其名字以及原价。学员最多每人可以选择一门课程，学员只要登记姓名，就可以选择一门课程来学习。</div>
          <div class="text">通过分析这个简单场景，可以很容易分析出，有两种对象：学员，课程。也就是说，我们应该创建两个类，Student,    Course。</div>
          <div class="text">Course类有两个属性，课程名称和原始价格。如下：</div>
          <codemirror
              v-model="code3"
              :options="cmOptions"
              class="code">
          </codemirror>
          <div class="text">然后创建另外一个类， Student, 该类有一个学员姓名属性 name ，另外，因为每个学员可以选择一门课程学习，那么就是说， 每个Student对象，会有一个Course对象 ，即 Course应该作为Student的一个属性存在 ，即 Student 关联了 Course 。那么，会有如下声明：</div>
          <codemirror
              v-model="code4"
              :options="cmOptions"
              class="code">
          </codemirror>
          <div class="text">继续分析， Student应该有1 个行为，就是选择课程。要完成选择课程这个操作，必须得接受一个课程的对象，也就是说， Student选课 这个行为，必须 依赖于Course的一个对象 ，才能完成，所以 Student和Course之间还存在依赖关系 ，继续完善上边代码：</div>
          <codemirror
              v-model="code5"
              :options="cmOptions"
              class="code">
          </codemirror>
          <div class="text">
            很多初学者，对于Course作为Student的一个属性，以及Course类型作为方法参数，作为方法返回值的类型，不能接受。总觉得只有String，int之类才是数据类型，而Course作为一个类型存在，有些不伦不类。Java是面向对象的语言，任何一个类，就是一个类型，都可以作为数据类型存在，我们自己声明的类也不例外。也就是说，如果能理解String作为一个类型存在，就应该坦然接受Course作为一个类型存在，因为它们是一样的，都是一个类型而已，只不过String是API中声明的，Course是我们自己声明的。
          </div>
          <div class="text">学习本文内容后，初学者应该又上了一个台阶，就是不再仅仅关注某个Java类的语法，而是从更高的角度去看待Java应用，去关注类与类的关系。</div>
        </li>
        <li>
          <h4>总结</h4>
          <div class="text">总结一下关联和依赖关系：</div>
          <ol class="inner-list">
            <li>关联和依赖都是面向对象编程中，常用的关系。</li>
            <li>关联表示has-a关系，如学生拥有一个课程，往往表现为B作为A的属性存在（A关联B）</li>
            <li>依赖表示要做一件事情，离不开某个对象。往往表现为B作为A的方法参数存在（A依赖B）</li>
            <li>当开始了解类与类的关系后，就需要对类型有更深入的了解。切记，任何类都可以作为类型使用。</li>
          </ol>
        </li>
      </ol>
      <div class="resource-link">
        <span class="label">原文链接：</span>
        <span class="link-text">https://blog.csdn.net/yuxin6866/article/details/52145504</span>
      </div>
    </div>
    <ReplyWrapper :comment-view-list="replyList" :total="30" />
    <div class="relative-pushes">
      <div class="topic-header">为你推荐</div>
      <div class="push-item" v-for="(item,idx) in articleList2.slice(1)" :key="idx">
        <div class="title">{{item.title}}</div>
        <div class="brief">{{item.content}}</div>
        <el-tag>#java</el-tag>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
h2.title {
  font-size: 32px;
  font-weight: 700;
  line-height: 60px;
  border-bottom: 2px solid #b7b5b5;
  margin-bottom: 20px;
}
p,h4,div.text {
  line-height: 2;
}
.text {
  text-indent: 2em;
}
ol li {
  list-style: inherit;
}
.inner-list {
  padding-left: 2em;
  li {
    line-height: 2;
  }
}
.resource-link {
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  background-color: #dfeefd;
  line-height: 2;
  .link-text {
    color: #117cee;
  }
}
.relative-pushes {
  margin-top: 30px;
  padding: 15px 0;
  .topic-header {
    line-height: 60px;
    font-size: 24px;
    font-weight: 700;
  }
  .push-item {
    border-top: 1px solid #b7b5b5;
    padding: 8px;
    .title {
      font-size: 16px;
      font-weight: 700;
      line-height: 30px;
    }
    .brief {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: 8px 0;
    }
  }
}
</style>